import React from 'react';
import { Button, Row, Col, Pagination, Empty } from 'antd';
import CommonListsIndex from 'src/components/CommonLists/index';
import FilterTool from 'src/components/FilterTool';
import ModelItem from './ModelItem';
import Import from './import';
import Modal from 'src/components/Modal';

class ModelStoreIndex extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'repositoryModel';
    this.queryParams = {};
    this.initQueryPanigation = {
      current_page: 1,
      page_size: 8,
    };
    this.state = {
      ...this.state,
    };

    this.model_width = 500;
  }
  componentDidMount() {}
  onChangePagination = (pageNumber) => {
    this.updatePanagaition &&
      this.updatePanagaition({
        current_page: pageNumber,
      });
    this.freshQueryList();
  };
  import = () => {
    Modal.open({
      title: '导入模型',
      width: '800px',
      content: <Import closeModal={this.closeModal} />,
      isOkBtn: false,
      isCancelBtn: false,
    });
  };
  render() {
    const data = [
      {
        type: 'Search',
        key: 'keyword',
        name: 'keyword',
        defaultValue: '',
        placeholder: '请输入模型名称进行搜索',
      },
    ];
    const { list } = this.state;
    return (
      <div>
        <Row type='flex' justify='space-between' align='middle'>
          <Col span={6}>
            <Button type='primary' onClick={this.import.bind(this, { title: '添加模型' })}>
              导入模型
            </Button>
          </Col>
          <Col span={18}>
            <FilterTool
              ref='filterTool'
              data={data}
              colNum={1}
              query={this.freshQueryList}
              refreshFilter={this.refreshFilter}
              isOnChange={true}
              justify='end'
              refresh={this.resetList}
            />
          </Col>
        </Row>
        <div style={{ marginTop: '10px' }}>
          {this.state.totalCount !== 0 ? (
            <Row justify='start' type='flex' gutter={20}>
              {list.map((item, idx) => {
                return (
                  <Col span={6} style={{ marginBottom: '20px' }} key={idx}>
                    <ModelItem {...this.props} dataSource={item} queryList={this.freshQueryList} />
                  </Col>
                );
              })}
            </Row>
          ) : (
            <div className='inner-content' style={{ paddingTop: '20px' }}>
              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            </div>
          )}
        </div>
        {this.state.totalCount !== 0 && this.state.totalCount !== undefined && (
          <Pagination
            current={this.state.currentPage}
            pageSize={this.state.pageSize}
            total={this.state.totalCount}
            showTotal={(total) => {
              return `总共 ${total} 条`;
            }}
            onChange={this.onChangePagination}
            style={{ textAlign: 'right' }}
            size={this.state.paginationSize || ''}
            showQuickJumper={true}
          />
        )}
      </div>
    );
  }
}

export default ModelStoreIndex;
